<template>
  <div class="navbar_wrap hidden-xs-only">
    <div class="navbar_container">
      <div class="navbar_left">
        <img src="@/assets/asissi/svg/logo.svg" alt="爱喜喜" />
      </div>
      <div class="navbar_right">
        <el-menu
          :default-active="activeIndex"
          class="el_menu_demo"
          mode="horizontal"
          background-color="rgba(255,255,255,1)"
          :text-color="navBackground"
          :active-text-color="navBackground"
          @select="changeCurrentPage"
        >
          <el-menu-item index="1" class="menu_item">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">产品</template>
            <el-menu-item index="2-1" class="menu_item">月兔系列</el-menu-item>
            <el-menu-item index="2-2" class="menu_item">蝴蝶系列</el-menu-item>
            <el-menu-item index="2-3" class="menu_item"
              >吉祥结系列</el-menu-item
            >
            <el-menu-item index="2-4" class="menu_item">蕉叶系列</el-menu-item>
          </el-submenu>
          <el-menu-item index="3" class="menu_item">爱喜喜团队</el-menu-item>
        </el-menu>
        <span class="right_phone">
          <i class="el-icon-phone"></i>
          <span> 131-6803-3913 </span>
        </span>
        <div
          @click="go"
          style="height: 100%; display: flex; align-items: center"
        >
          <img
            src="@/assets/asissi/xhs.png"
            style="height: 20px; margin-left: 20px"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      navBackground: "#000",
    };
  },
  props: {
    selectIndex: {
      type: String,
      default: "0",
    },
  },
  mounted() {
    this.activeIndex = this.selectIndex;
    window.onscroll = () => {
      if (document.documentElement.scrollTop > 390) {
        this.navBackground = "#000";
      } else {
        this.navBackground = "#000";
      }
    };
  },
  methods: {
    go() {
      location.href =
        "https://www.xiaohongshu.com/user/profile/576d57da5e87e71d9496bacf?xhsshare=WeixinSession&appuid=576d57da5e87e71d9496bacf&apptime=1713874467";
    },
    changeCurrentPage(index) {
      this.activeIndex = index;
      switch (this.activeIndex) {
        case "1":
          this.$router.push("/home").catch((v) => {});
          break;
        case "2-1":
          this.$router.push("/production/1").catch((v) => {});
          break;
        case "2-2":
          this.$router.push("/production/2").catch((v) => {});
          break;
        case "2-3":
          this.$router.push("/production/3").catch((v) => {});
          break;
        case "2-4":
          this.$router.push("/production/4").catch((v) => {});
          break;
        case "3":
          this.$router.push("/threenav").catch((v) => {});
          break;
        case "4":
          this.$router.push("/konw").catch((v) => {});
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar_wrap {
  width: 100%;
  height: 70px;
  // background: rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 1);
  backdrop-filter: saturate(180%) blur(0.5rem);
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  .navbar_container {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .navbar_left {
      display: flex;
      align-items: center;
      height: 100%;
      img {
        width: 160px;
        cursor: pointer;
      }
    }
    .navbar_right {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 20px;
      a {
        text-decoration: none;
        color: black;
        display: inline-block;
        width: 100px;
        background: #ffa400;
        line-height: 27px;
        text-align: center;
        border-radius: 20px;
        padding: 5px;
      }
      .el_menu_demo {
        border: none;
      }
      .menu_item {
        &:hover {
          font-weight: 600;
          background: transparent !important;
        }
      }
      .right_phone {
        &:hover {
          color: #ccc;
        }
        transition: all 0.5s;
        display: flex;
        align-items: center;
        i {
          font-size: 20px;
        }
        span {
          margin-left: 0.5rem;
        }
        margin-left: 2.5rem;
        color: #000;
      }
    }
  }
}
</style>
